<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文章类型</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div class="row">
    <div>
        <ol class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                   role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                主&nbsp;&nbsp; 页</a></li>
            <li class="active">文章类型管理</li>
            <li class="active">文章类型管理</li>
        </ol>
    </div>
</div>

<div class="container">



    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>文章类型 —— 显示所有类型</small>&nbsp;&nbsp;&nbsp;&nbsp;
                </h1>

                <div class="row">
                    <div class="col-sm-6 col-sm-offset-6">
                        <div class="input-group input-group-sm">
                            <span class="input-group-addon">是否可用</span>
                            <select class="form-control" id="searchState" name="newsState">
                                <c:if test="${typeState==2}">
                                    <option value="1" >可用</option>
                                    <option value="2" selected>不可用</option>
                                    <option value="3">全部</option>
                                </c:if>
                                <c:if test="${typeState==1}">
                                    <option value="1" selected>可用</option>
                                    <option value="2" >不可用</option>
                                    <option value="3">全部</option>
                                </c:if>
                                <c:if test="${typeState!=1 and typeState!=2}">
                                    <option value="1">可用</option>
                                    <option value="2" >不可用</option>
                                    <option value="3" selected>全部</option>
                                </c:if>

                            </select>
                            <span class="input-group-addon">按类型名称搜索</span>
                            <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord" name="typeName" value="${typeName}"/>
                            <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
                        </div><!-- /input-group -->
                    </div>
                </div>
                <br/>
                <br/>
            </div>




        </div>
    </div>



    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th><input type="checkbox" id="main-type-id" style="zoom:150%;"/></th>
                    <th>文章名称</th>
                    <th>文章状态</th>
                    <th>文章种类</th>
                    <th>使用次数</th>
                    <th>操&nbsp;&nbsp;&nbsp;&nbsp;作</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach var="type" items="${page.list}">
                    <tr>
                        <td id="s1">
                            <c:if test="${type.countId==0}">
                                <input class="one" type="checkbox" value="${type.typeId}" typeName="${type.typeName}" name="ids" style="zoom:150%;">
                            </c:if>
                            <c:if test="${type.countId>0}">
                                <span class="glyphicon glyphicon-ban-circle" id="nose"></span>
                            </c:if>
                        </td>
                        <td>${type.typeName}</td>
                        <td>${type.typeState==1?"可用":"不可用"}</td>
                        <td>
                            <c:choose>
                                <c:when test="${type.typeSort==1}">小说</c:when>
                                <c:when test="${type.typeSort==2}">故事</c:when>
                                <c:when test="${type.typeSort==3}">诗歌</c:when>
                                <c:when test="${type.typeSort==4}">童话</c:when>
                            </c:choose>
                        </td>
                        <td>${type.countId}</td>
                        <td id="td">

                            <a href="${pageContext.request.contextPath}/articleType/findByTitle/${type.typeId}/${page.currentPage}" class="btn btn-info btn-block" id="update">
                                类型修改
                            </a>

                            <c:if test="${type.typeState==1 and type.countId!=0}">
                                <a href="${pageContext.request.contextPath}/article/findArticleAll?typeName=${type.typeName}&rows=9&type=type" class="btn btn-info btn-block">
                                    使用详情
                                </a>
                            </c:if>
                            <c:if test="${type.typeState==2 or type.countId==0}">
                                <button  class="btn btn-info btn-block" >
                                    使用详情
                                </button>
                            </c:if>


                        </td>

                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

    <br/>
    <div class="container">
        <button type="button" id="batch_delete" class="btn btn-info btn-block">删除选中</button>
    </div>
    <br/>
    <div class="container">
        <button type="button" id="button2" class="btn btn-info btn-block">新增类型</button>
    </div>

    <div class="container">
        <div class="row" style="padding-top:50px">

            <div class="container">
                <ul class="pagination">
                    <c:if test="${page.currentPage==1}">
                        <li class="disabled"><a href="#">«</a></li>
                    </c:if>
                    <c:if test="${page.currentPage>1}">
                        <li>
                            <a href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${page.currentPage-1}&rows=3&typeName=${typeName}&typeState=${typeState}">«</a>
                        </li>
                    </c:if>
                    <c:forEach begin="1" end="${page.totalPage}" var="i">
                        <c:if test="${page.currentPage==i}">
                            <li class="active">
                                <a href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${i}&rows=3&typeName=${typeName}&typeState=${typeState}">第${i}页</a>
                            </li>
                        </c:if>
                        <c:if test="${page.currentPage!=i}">
                            <li>
                                <a href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${i}&rows=3&typeName=${typeName}&typeState=${typeState}">第${i}页</a>
                            </li>
                        </c:if>
                    </c:forEach>
                    <c:if test="${page.currentPage==page.totalPage}">
                        <li class="disabled"><a href="#">»</a></li>
                    </c:if>
                    <c:if test="${page.currentPage<page.totalPage}">
                        <li>
                            <a href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${page.currentPage+1}&rows=3&typeName=${typeName}&typeState=${typeState}">»</a>
                        </li>
                    </c:if>


                </ul>
            </div>

        </div>
    </div>

</div>
<script>
    $("#search").click(function (){
        window.location.href="${pageContext.request.contextPath}/articleType/findAllCount?typeState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
    })
    $("#searchState").change(function (){
        window.location.href="${pageContext.request.contextPath}/articleType/findAllCount?typeState="+$("#searchState").val()
    })
    $("#td button").click(function (){
        alert("文章类型不可用，或者是还没有被用到过！")
    })
    $("#s1 #nose").click(function (){
        alert("文章类型有被使用，不能删除")
    })

    $("#batch_delete").click(function(){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要删除的项！")
        }else{
            let arr_id=[];
            let articleName=[]
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
                articleName.push($(n).attr("typeName"))
                console.log($(n).val())
                console.log(arr_id)
                console.log(articleName)
            })
            if(confirm("是否删除标题为【"+articleName.join(",")+"】的消息？")){
                console.log("提交到后台的gid为："+arr_id.join(","))

                $.ajax({
                    url:"${pageContext.request.contextPath}/articleType/deleteSelectedArticle",
                    type:"post",
                    data:{"ids":arr_id.join(",")},
                    success:function (msg){
                        alert(msg)
                        <c:if test="${page.list.size()==1}">
                        window.location.href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${page.currentPage-1}&rows=${page.rows}"
                            +"&typeState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
                        </c:if>
                        <c:if test="${page.list.size()!=1}">
                        window.location.href="${pageContext.request.contextPath}/articleType/findAllCount?currentPage=${page.currentPage}&rows=${page.rows}"
                            +"&typeState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
                        </c:if>
                    }
                })
            }
        }

    })

    $("#main-type-id").on("click",function(){
        $(".one").prop("checked",$(this).prop("checked"))
    })


    $("table").on("click",".one",function(){
        $("#main-type-id").prop("checked",$(".one").length==$(".one:checked").length)
    })

    $("#button2").click(function (){
        window.location.href="${pageContext.request.contextPath}/articleType/findByTitle/add/${page.currentPage}"
    })

</script>
</body>
